var fs = require('fs');
const {ipcRenderer} = require('electron')

function regist_click(html,template,functor){
  Array.prototype.forEach.call(html.querySelectorAll(template), (item) => {
    item.addEventListener('click', functor)
  })
}

function regist_container_click(html,container){
  regist_click(html,container,(event) => {
      const parent = event.target.parentElement
      if(parent.classList.contains('is-open')){
        parent.classList.remove('is-open')
      }
      else{
        parent.classList.toggle('is-open')
      }
  })
}

function regist_click_button(html,template,functor){
  Array.prototype.forEach.call(html.querySelectorAll(template), (item) => {
    item.addEventListener('click', (event)=>{
      let gameid = item.getAttribute("gameid");
      let projectid = item.getAttribute("projectid");
      functor(gameid,projectid)
    })
  })
}

function update_template(name,data,node){
  var html = template(name,data);
  node.innerHTML = html;
  regist_container_click(node,'button')

  regist_click_button(node,".delete-project",(gameid,projectid) => {
    console.log(gameid+" "+projectid)
  })

  regist_click_button(node,".edit-project",(gameid,projectid) => {
    console.log(gameid+" "+projectid)
  })

  regist_click_button(node,".update-project",(gameid,projectid) => {
    console.log(gameid+" "+projectid)
  })

  regist_click_button(node,".commit-project",(gameid,projectid) => {
    console.log(gameid+" "+projectid)
  })

  regist_click_button(node,".revert-project",(gameid,projectid) => {
    console.log(gameid+" "+projectid)
  })
}


function init_game_projects(){
  games = ipcRenderer.sendSync('get-all-games')
  //自动填充其他额外属性，便于模版处理
  var fulldata = {list:[]}
  var allproject = []
  games.forEach(function(g){
    var item = {
      id:g.id,
      name:g.name,
      develope:g.develope,
      wwise:g.wwise,
      color:g.color,
      projects:{
        id:g.id,
        operation:1,
        main:g.projects.main,
        others:g.projects.others
      },
      wwiseprojects:{
        id:g.id,
        operation:20,
        main:{id:1,name:"Open Wwise Project"},
        others:[{id:2,name:"Containing Folder"},{id:3,name:"Integrate Wwise info"},{id:4,name:"Wwise Setting"}]
      },
      operations:{
        id:g.id,
        operation:30,
        main:{id:1,name:"AssetTracker"},
        others:[{id:2,name:"Config Data"},{id:3,name:"Database Setting"}]
      }
    }
    fulldata.list.push(item)
    allproject.push(g.id)
  })
  var html = template('games',fulldata);
  document.getElementById('left-games').innerHTML = html;
  Array.prototype.forEach.call(document.querySelectorAll('.project-operation'),function(item){
    item.addEventListener("click", function(){
      var cmds = {
        operation:item.getAttribute("operation"),
        gameid:item.getAttribute("gameid"),
        projectid:item.getAttribute("projectid")
      }
      console.log(item)
      ipcRenderer.send('project-commmand', cmds)
    })
  })

  regist_container_click(document,'.js-container-target')

  Array.prototype.forEach.call(document.getElementsByClassName('button-showmore'),function(item){
    item.addEventListener("click", function(){
      var id = item.getAttribute('gameid')
      var info = document.getElementById('right-game-detail')
      var game = ipcRenderer.sendSync('get-game',id)
      if (info.classList.contains("is-shown")){
        var infoid = info.getAttribute('gameid')
        if(id != infoid){
          update_template('game-detail-template',game,info)
          info.setAttribute('gameid',id)
        }else{
          info.classList.remove("is-shown")
        }
      }  
      else{
        info.classList.add("is-shown")
        update_template('game-detail-template',game,info)
        info.setAttribute('gameid',id)
      }  
    })
  })


}

init_game_projects()
